<template>
  <div>
    <el-form ref="form" :model="form" style="margin-left: 200px" label-width="120px">
      <el-form-item label="标识ID" style="width: 380px">
        <el-input v-model="form.markId" disabled>
          <template slot="prepend">SKIN</template>
        </el-input>
      </el-form-item>
      <el-form-item label="皮肤名称" style="width: 380px" required>
        <el-input v-model="form.skinName"></el-input>
      </el-form-item>
      <el-form-item label="设备类型" required>
        <el-radio-group v-model="form.equipmentType">
          <el-radio :label="22">IOS</el-radio>
          <el-radio :label="20">安卓</el-radio>
          <el-radio :label="31">惠付通</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="皮肤类型" required>
        <el-radio-group v-model="form.skinType">
          <el-radio :label="0">默认皮肤</el-radio>
          <el-radio :label="1">活动皮肤</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="上传效果图" required>
        <el-upload
          class="avatar-uploader"
          :action="imgAddress"
          name="imageFile"
          :show-file-list="false"
          :on-success="success">
          <img v-if="this.imageUrl" :src="this.imgHost + '/' + this.imageUrl" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="上传文件" required>
        <el-upload
          class="upload-demo"
          :action="FileAddress"
          :file-list="fileList"
          name="zipFile"
          :on-remove="handleRemove"
          :on-success="handleSuccess"
          accept=".zip">
          <el-button size="small" type="primary">点击上传</el-button>
          <!--<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>-->
        </el-upload>
      </el-form-item>
      <!--<el-form-item label="模版说明" style="width: 500px">-->
        <!--<el-input type="textarea" v-model="form.comments"></el-input>-->
      <!--</el-form-item>-->
      <el-form-item style="margin-top: 20px">
        <el-button type="primary" @click="onSubmit">创建</el-button>
        <el-button @click="cancel">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
  import { apiHost, apiURL } from '../../../config/settings.js'
  import { column } from '../../../config/proxy.js'
  import mixins from '../../../components/mixins.vue'
  import { mapState } from 'vuex'
  export default {
    mixins: [mixins],
    data () {
      return {
        fileList: [],
        FileAddress: '',
        imgHost: '',
        imgAddress: '',
        imageUrl: '',
        form: {
          equipmentType: 22,
          remark: '',
          contentNum: '',
          markId: '',
          skinType: 0,
          skinName: '',
          zipUrl: ''
        }
      }
    },
    methods: {
      testId (val) {
        if (isNaN(val)) {
          this.form.markId = ''
          this.$message({
            showClose: true,
            message: '请输入纯数字值',
            type: 'error'
          })
          return false
        }
      },
      success (res) {
        console.log(res)
        this.imageUrl = res.content.imageUrl
        this.form.imgUrl = res.content.imageUrl
      }, // 上传图片成功
      onSubmit () {
        if (this.imageUrl === '') {
          this.$message({
            showClose: true,
            message: '请上传图片',
            type: 'error'
          })
          return false
        }
        if (this.form.zipUrl === '') {
          this.$message({
            showClose: true,
            message: '请上传zip包',
            type: 'error'
          })
          return false
        }
        if (this.form.skinName === '') {
          this.$message({
            showClose: true,
            message: '请填写皮肤名称',
            type: 'error'
          })
          return false
        }
        var _data = this.form
//        _data.image = this.imageUrl
        _data.markId = this.form.markId
        _data.createUserName = this.userName
        _data.createUser = this.userId
        console.log(_data)
        column.hfTemplate.creat(_data, res => {
          if (res.message === 'ok') {
            this.$message({
              showClose: true,
              message: '创建成功',
              type: 'success'
            })
            this.$store.dispatch('delTab', {id: 'hfmb_add'})
            this.$store.dispatch('hfmbState', this.$store.state.updateState.hfmbState + 1)
          } else {
            this.$message({
              showClose: true,
              message: res.message,
              type: 'error'
            })
            this.form.markId = ''
          }
        })
      },   // 创建
      cancel () {
        this.$store.dispatch('delTab', {id: 'hfmb_add'})
      },     // 取消
      handleSuccess (res, file, fileList) {
        this.form.zipUrl = res.content.zipUrl
        console.log(fileList, 'wxxx')
      },
      handleRemove (file, fileList) {
        this.form.zipUrl = ''
      }
    },
    computed: mapState({
      userId: function (state) {
        return state.user.info.user_id
      },
      userName: function (state) {
        return state.user.info.user_name
      }
    }),
    created () {
      this.imgHost = apiHost.imgHost
      this.imgAddress = 'http://' + apiHost.newCms + ':20000' + apiURL.upLoadImage
      this.FileAddress = 'http://' + apiHost.newCms + ':20000' + apiURL.hfTemplate_upload
      column.hfTemplate.mark({}, res => {
        this.form.markId = res.content
      })  // 标识ID
    }
  }
</script>
<style>
  @media screen and (min-width:1000px) {
    .supplier-form{
      max-width: 600px;
    }
  }
  .el-form--inline div {
    display: inline-block;
    float: left;
  }
  .el-dialog__body {
    padding-top: 0;
  }
  .shuoming {
    line-height: 2;
    font-size: 16px;
    font-weight: 700;
    color: #1f2d3d;
  }
</style>
